<template>
  <div id="searchList">
    <FoodMenu></FoodMenu>
    <div class="shoplist">
      <div class="shopitem" v-for="(item,index) in searchWord" :key="index">
				<router-link :to="'/shop/'+item.restaurant.id">
          <div class="item-left">
            <img :src="'https://fuss10.elemecdn.com/'+ item.restaurant.image_path + (item.restaurant.image_path.substr(-3) === 'png'?'.png':'.jpeg') +'?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'" alt="">
            <div class="new-shop" v-if="item.restaurant.is_new"><span>新店</span></div>
          </div>
          <div class="item-right">
            <div class="title">
              <div class="title-left">
                <span v-if="item.restaurant.is_premium" class="is-premium">品牌</span>
                <h3>{{item.restaurant.name}}</h3>
              </div>
              <div class="title-right">
                <span>保</span>
                <span>票</span>
              </div>
            </div>
            <div class="tag">
              <div class="tag-left">
                <div class="rate-wrap">
                  <i class="iconfont">&#xe70e;</i>
                  <i class="iconfont">&#xe70e;</i>
                  <i class="iconfont">&#xe70e;</i>
                  <i class="iconfont">&#xe70e;</i>
                  <i class="iconfont">&#xe70e;</i>
                </div>
                <span class="rate">{{item.restaurant.rating}}</span>
                <span>月售{{item.restaurant.recent_order_num}}单</span>
              </div>
              <div class="tag-right">
                <!-- <span>准时达</span> -->
                <span class="fengniao" v-if="item.restaurant.delivery_mode">蜂鸟专送</span>
              </div>
            </div>
            <div class="info">
              <div class="info-left">
                <span>￥{{item.restaurant.float_minimum_order_amount}}起送</span>/
                <span>配送费￥{{parseInt(item.restaurant.float_delivery_fee)}}</span>/
                <span>{{item.restaurant.average_cost}}</span>
              </div>
              <div class="info-right">
                <span class="distance">{{item.restaurant.distance < 1000 ? item.restaurant.distance + 'm': (item.restaurant.distance/1000).toFixed(2) + 'km'}}</span>
                <span class="duration"><strong>{{item.restaurant.order_lead_time}}</strong>分钟</span>
              </div>
            </div>
          </div>
				</router-link>
			</div>
    </div>
  </div>
</template>

<script>
import FoodMenu from './FoodMenu'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'searchList',
  components: {
    FoodMenu
  },
  computed: {
    ...mapState(['msiteList', 'searchWord'])
  },
  methods: {
    toggleAct: function () {
      this.$refs.activities.className = 'activities-on'
    },
    ...mapMutations({
      getList: 'GETMSITELIST',
      loadMore: 'MOREMSITELIST',
      srhTxt: 'SEARCHTXT2'
    })
  },
  mounted: function () {
    this.getList()
    this.srhTxt()
  }
}
</script>

<style lang="scss" >
@import '../../static/hotcss/px2rem.scss';
#searchList {
	.filter .filter-header{
		position:fixed;
		left: 0;
		top: px2rem(110);
	}
	.filter .filter-extend .filter-scroller{
		position:fixed;
		left: 0;
		top: px2rem(190);
		background: #fff;
	}
	.filter .filter-extend{
		position:fixed;
		left: 0;
		top: px2rem(190);
	}
	.shoplist{
	margin-top: px2rem(190);
	}
}

.list-title{
	margin-top: px2rem(20);
	font-weight: 600;
	line-height: px2rem(69);
	border-top: 1px solid #eee;
	font-size: px2rem(30);
	padding-left:px2rem(30);
	background-color: #fff;
	border-bottom: 1px solid #eee;
}
.shopitem{
	
	a{
		display: block;
		text-decoration: none;
		border-bottom: 1px solid #eee;
		background: #fff;
		display: flex;
		color: #000;
		.item-left{
    position: relative;
		padding: px2rem(30) px2rem(20);
		img{
			width: px2rem(120);
			height: px2rem(120);
		}
    .new-shop{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 50;
      width: px2rem(64);
      height: px2rem(64);
      background-image: -webkit-linear-gradient(315deg,#26ce61,#26ce61 50%,transparent 0);
      background-image: linear-gradient(135deg,#26ce61,#26ce61 50%,transparent 0);
      font-size: px2rem(18);
      span{
        position: absolute;
        top: px2rem(10);
        left: px2rem(2);
        display: block;
        color: #fff;
        font-weight: 700;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
    }
	}
	.item-right{
		flex:1;
		padding: px2rem(30) px2rem(20);
		padding-left: 0;
		.title{
			display: flex;
			justify-content: space-between;
			height: px2rem(32);
			.title-left{
				display: flex;
        flex: 1;
				h3{
					font-size: px2rem(30);
					line-height: px2rem(32);
          width: 80%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
				}
				span {
					display: inline-block;
					padding: 0 px2rem(4);
					font-size: px2rem(22);
					line-height: px2rem(32);
					margin-right: px2rem(10);
					color: #52250a;
					background-color: #ffd930;
					font-weight: 600;
				}
			}
			.title-right{
				span{
					position: relative;
					top: px2rem(-26);
					font-size: px2rem(20);
					color: #999;
					border:1px solid #ccc;
					border-radius: px2rem(3);
				}
			}
		}
		.tag{
			color: #666;
			font-size: px2rem(22);
			margin-top: px2rem(17);
			display: flex;
			justify-content: space-between;
			.tag-left{
				display: flex;
				.rate-wrap{
					i{
						font-size: px2rem(20);
						color: #ffaa0c;
					}
				}
				.rate{
					margin:0 px2rem(8);
					color: #ff6000;
				}
			}
			.tag-right{
				span{
					padding: 0 px2rem(5);
    				border: 1px solid #44a5ff;
				    border-radius: px2rem(5);
				    background-color: #fff;
				    color: #2395ff;
				    font-size: px2rem(20);
				    /*line-height: .346667rem;*/
				}
				.fengniao{
					background-color: #2395ff;
    				color: #fff;
				}
			}
		}
		.info{
			color: #666;
			font-size: px2rem(22);
			margin-top: px2rem(20);
			display: flex;
			justify-content: space-between;
			.info-right{
				strong{
					font-size: px2rem(20);
					font-weight: normal;
				}
				.duration{
					color: #2395ff;
				}
			}
		}
		.activities{
			position: relative;
			margin-top: px2rem(10);
			padding: px2rem(10) 0;
			border-top: 1px solid #eee;
			font-size: px2rem(20);
			color: #939393;
			.activity-item{
				line-height: px2rem(20);
				margin-top: px2rem(18);
				.activity-tag{
					background-color: rgb(240, 115, 115);
					color: #fff;
					border-radius: px2rem(5);
					padding: 0 px2rem(2);
				}
			}
			.more-activity{
				position: absolute;
				right: 0;
				top: px2rem(18);
			}
		}
    .activities-on{
      height: px2rem(100);
      overflow: hidden;
    }
	}

	}
}
</style>


